步骤 1： 配置 Bucket 跨域 客户端进行表单直传到 OSS 时，会从浏览器向 OSS 发送带有 Origin 的请求消息。OSS 对带有 Origin 头的请求消息会进行跨域规则（CORS）的验证。因此需要为 Bucket 设置跨域规则以支持 Post 方法。
image.png
步骤 2：配置外网域名到小程序的上传域名白名单中 通过 OSS 控制台查看外网域名。
image
登录微信小程序平台，配置小程序的上传域名白名单。
image
步骤 3：使用 Web 端直传实践方案 Demo 进行上传测试
下载应用服务器代码
修改 Demo 中 upload.js 的密钥和地址。
image
进行上传测试。
image.png
image.png
image.png
获取上传需要的签名（signature）和加密策略（policy）
使用微信小程序上传图片 使用 chooseImage API 进行图片选择，然后调用 uploadFile 进行文件上传
image
https://help.aliyun.com/product/31815.html?spm=a2c4g.11186623.6.540.155a7eaeW7iaPX
upload.js代码语言：javascript复制accessid= '';accesskey= '';host = '';g_dirname = ''g_object_name = ''g_object_name_type = ''now = timestamp = Date.parse(new Date()) / 1000; var policyText = {"expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了"conditions": [["content-length-range", 0, 1048576000] // 设置上传文件的大小限制]};var policyBase64 = Base64.encode(JSON.stringify(policyText))message = policyBase64var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true }) ;var signature = Crypto.util.bytesToBase64(bytes);function check_object_radio() {var tt = document.getElementsByName('myradio');for (var i = 0; i < tt.length ; i++ ){if(tt[i].checked){g_object_name_type = tt[i].value;break;}}}function get_dirname(){dir = document.getElementById("dirname").value;if (dir != '' && dir.indexOf('/') != dir.length - 1){dir = dir + '/'}//alert(dir)g_dirname = dir}function random_string(len) {len = len || 32;var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';var maxPos = chars.length;var pwd = '';for (i = 0; i < len; i++) {pwd += chars.charAt(Math.floor(Math.random() * maxPos));}return pwd;}function get_suffix(filename) {pos = filename.lastIndexOf('.')suffix = ''if (pos != -1) {suffix = filename.substring(pos)}return suffix;}function calculate_object_name(filename){if (g_object_name_type == 'local_name'){g_object_name += "${filename}"}else if (g_object_name_type == 'random_name'){suffix = get_suffix(filename)g_object_name = g_dirname + random_string(10) + suffix}return ''}function get_uploaded_object_name(filename){if (g_object_name_type == 'local_name'){tmp_name = g_object_nametmp_name = tmp_name.replace("${filename}", filename);return tmp_name}else if(g_object_name_type == 'random_name'){return g_object_name}}function set_upload_param(up, filename, ret){g_object_name = g_dirname;if (filename != '') {suffix = get_suffix(filename)calculate_object_name(filename)}new_multipart_params = {'key' : g_object_name,'policy': policyBase64,'OSSAccessKeyId': accessid, 'success_action_status' : '200', //让服务端返回200,不然，默认会返回204'signature': signature,};up.setOption({'url': host,'multipart_params': new_multipart_params});up.start();}var uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',browse_button : 'selectfiles', //multi_selection: false,container: document.getElementById('container'),flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',url : 'http://oss.aliyuncs.com',init: {PostInit: function() {document.getElementById('ossfile').innerHTML = '';document.getElementById('postfiles').onclick = function() {set_upload_param(uploader, '', false);return false;};},FilesAdded: function(up, files) {plupload.each(files, function(file) {document.getElementById('ossfile').innerHTML += '' + file.name + ' (' + plupload.formatSize(file.size) + ')'+''+'';});},BeforeUpload: function(up, file) {check_object_radio();get_dirname();set_upload_param(up, file.name, true);},UploadProgress: function(up, file) {var d = document.getElementById(file.id);d.getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%";var prog = d.getElementsByTagName('div')[0];var progBar = prog.getElementsByTagName('div')[0]progBar.style.width= 2*file.percent+'px';progBar.setAttribute('aria-valuenow', file.percent);},FileUploaded: function(up, file, info) {if (info.status == 200){document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = 'upload to oss success, object name:' + get_uploaded_object_name(file.name);}else{document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;} },Error: function(up, err) {document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));}}});uploader.init();index.html代码语言：javascript复制OSS web直传OSS web直传---直接在JS签名基于plupload封装 支持html5,flash,silverlight,html4 等协议上传可以运行在PC浏览器，手机浏览器，微信可以选择多文件上传显示上传进度条可以控制上传文件的大小最关键的是，让你10分钟之内就能移植到你的系统，实现以上牛逼的功能！注意一点，bucket必须设置了Cors(Post打勾）,不然没有办法上传注意一点，把upload.js 里面的host/accessid/accesskey改成您上传所需要的信息即可此方法是直接在前端签名，有accessid/accesskey泄漏的风险, 线上生产请使用后端签名例子点击查看详细文档 上传文件名字保持本地文件名字 上传文件名字是随机文件名上传到指定目录:您所选择的文件列表：你的浏览器不支持flash,Silverlight或者HTML5！选择文件开始上传实现点击按钮选择图片后显示图片并且可以预览该图片
image.png
image.png
image.png
image.png
跳转的按钮在子组件
代码语言：javascript复制this.$navigate({url:"content"})this.$parent.$navigate({url:"content"})wepy.navigateTo({url: '/pages/content'})